<template>
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        open
    </el-button> -->
    <el-avatar shape="cover" :size="100" :src="props.modelValue" @click="drawer = true" >
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
    </el-avatar>
    <el-drawer v-model="drawer" title="图片服务器" direction="ttb" size="50%">
    
    <el-upload v-model:file-list="fileList" list-type="picture-card" :auto-upload="false" :on-change="onChage">
        <el-icon>
            <Plus />
        </el-icon>

        <template #file="{ file }">
            <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="getImgUrl(file.url)">
                        <el-icon><zoom-in /></el-icon>
                    </span>
                </span>
            </div>
        </template>
    </el-upload>
    </el-drawer>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {UploadApi} from '@/api'
const drawer = ref(false)
//const imgurl=ref()
const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])

const getImgUrl = (imageUrl:String) => { 
    // console.log("imgUrl", imageUrl);
    // imgurl.value = imageUrl //头像赋值
    emit('update:modelValue',imageUrl)
    drawer.value=false
}

const onChage = (uploadFile: any, uploadFiles: any) => {
    console.log("uploadFile：", uploadFile);
    console.log("uploadFiles", uploadFiles);
    //获取图片名字
    let name = uploadFile.name;

    let file = uploadFile.raw
    let reader = new FileReader()
    reader.readAsDataURL(file)
    //FileReader 读取图片转换后的base64
    reader.onload = () => {
        console.log(reader.result);
        CalluploadApi(name, reader.result)
    }
}

const CalluploadApi = (name:String ,base64:any) => { 
    UploadApi.upload.call({ name: name, base64: base64 }).then((res: any) => { 
        console.log(res);
        
    })
}
onMounted(() => { 
    callimgList()

})

const callimgList = () => { 
    UploadApi.imglist.call().then((res:any) => { 
        fileList.value=res
    })
}
//定义要传递的默认值，原则上vue是单向数据流 父---> 子 
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

// emit 提前定义 告知父类要拿或要改哪些东西
const emit = defineEmits(['update:modelValue'])

</script>